<template>
    <!-- 外层容器处理位置与尺寸，不应用旋转（动画需要以页面坐标进行） -->
    <div class="w-text-wrapper" :style="wrapperStyle">
        <!-- 动画容器：不旋转，动画类作用于此 -->
        <div 
            class="w-text-anim animated animate__animated" 
            :data-delay="delay" 
            :data-show="showClass" 
            :data-emphasis="emphasisClass" 
            :data-out="outClass"
            :data-emphasis-delay="emphasisDelay" 
            :data-out-delay="outDelay"
        >
            <!-- 内容层：仅负责视觉旋转和文本样式 -->
            <div class="w-text" :style="contentStyle">{{value}}</div>
        </div>
    </div>
</template>

<script>
import element from '@/mixins/element'

export default {
    props: {
        value: {
            type: String,
            default: '测试文本'
        },
        // 动画相关属性
        delay: {
            type: [Number, String],
            default: 0
        },
        showClass: {
            type: String,
            default: ''
        },
        emphasisClass: {
            type: String,
            default: ''
        },
        outClass: {
            type: String,
            default: ''
        },
        emphasisDelay: {
            type: [Number, String],
            default: 1000
        },
        outDelay: {
            type: [Number, String],
            default: 28000
        }
    },
    name: 'w-text',
    mixins: [element],
    computed: {
        wrapperStyle() {
            // wrapper only handles position and size; do NOT rotate here so animations run in page coordinates
            const { width = 0, height = 0, top = 0, left = 0, zIndex = 1 } = this.styleObj;
            const style = {
                position: 'absolute',
                width: `${this.calcXAttr(width)}px`,
                height: `${this.calcYAttr(height)}px`,
                top: `${this.calcYAttr(top)}px`,
                left: `${this.calcXAttr(left)}px`,
                zIndex: zIndex,
                transformOrigin: 'center center'
            };
            return style;
        },
        contentStyle() {
            // 内层元素处理除旋转外的其他样式
            const { 
                radius = 0, 
                fontSize = 16, 
                fontWeight = 'normal', 
                color = '#FFF', 
                backgroundColor = 'transparent', 
                animationCount = '1', 
                textAlign = 'left', 
                verticalAlign = 'top', 
                fontFamily = 'Arial' 
            } = this.styleObj;
            
            const style = {
                color,
                fontWeight,
                backgroundColor,
                fontFamily,
                width: '100%',
                height: '100%',
                borderRadius: `${radius}px`,
                fontSize: `${this.calcXAttr(fontSize)}px`,
                'animation-iteration-count': `${animationCount}`,
                // 使用flex布局实现文本对齐
                display: 'flex',
                'flex-direction': 'column',
                // apply visual rotation here so animation container remains unrotated
                transform: `rotateZ(${this.styleObj.angel || 0}deg)`,
                transformOrigin: 'center center'
            };

            // 设置主轴对齐（水平方向）
            switch(textAlign) {
                case 'left':
                    style.justifyContent = 'flex-start';
                    break;
                case 'center':
                    style.justifyContent = 'center';
                    break;
                case 'right':
                    style.justifyContent = 'flex-end';
                    break;
                default:
                    style.justifyContent = 'flex-start';
            }

            // 设置交叉轴对齐（垂直方向）
            switch(verticalAlign) {
                case 'top':
                    style.alignItems = 'flex-start';
                    break;
                case 'middle':
                    style.alignItems = 'center';
                    break;
                case 'bottom':
                    style.alignItems = 'flex-end';
                    break;
                default:
                    style.alignItems = 'flex-start';
            }
            
            console.log('Text content style:', style);
            return style;
        }
    }
}
</script>

<style lang="scss" scoped>
.w-text-wrapper {
    transform-origin: center center;
}

.w-text {
    outline: none;
    user-select: none;
    transform-origin: center center;
    // 默认使用 flex 布局
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // 添加默认对齐方式，确保文本正确显示
    justify-content: flex-start;
    align-items: flex-start;
}
</style>